<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>我要点餐主界面</title>
	<script type="text/javascript" src="/resources/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="/resources/js/commons.js"></script>
	<script type="text/javascript" src="/resources/layer-v3.1.1/layer/layer.js"></script>

	<link rel="stylesheet" type="text/css" href="/resources/macbook/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/resources/macbook/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
	<link rel="stylesheet" type="text/css" href="/resources/macbook/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="/resources/macbook/css/checkout-sidebar.css" />

	<!-- flycart start -->

	<link rel="stylesheet" type="text/css" href="/resources/css/flycart.css" />
	<script src="/resources/flycart/jquery.fly.min.js"></script>
	<script src="/resources/js/flycart.js"></script>
	<!--[if lte IE 9]>
	<script src="/resources/flycart/requestAnimationFrame.js"></script>
	<![endif]-->

	<!-- flycart end -->

	<style>
	</style>

</head>
<body class="color-2">
<div class="container">
	<section class="content">
		<div class="dummy-browser">
			<div class="dummy-grid dummy-grid--filled dummy-grid--sidebar">
				<div class="dummy-sidebar">

					<!-- 购物车 start -->
					<div class="checkout checkout--active">
						<a id="end" class="checkout__button" href="#">我的餐桌</a>
						<input id="cartId" type="hidden" value="<%= session.getAttribute("cartId") %>" />
						<div class="checkout__order">
							<div class="checkout__order-inner">
								<table class="checkout__summary">
									<thead id="checkout_thead">
										<tr style="text-align: center">
											<th>菜品/套餐</th>
											<th style="min-width: 52px;">数 量</th>
											<th style="min-width: 52px;">价 格</th>
											<th style="min-width: 52px;text-align: center;">操 作</th>
										</tr>
									</thead>
									<tbody id="checkout_tbody">
										<tr>
											<td><span><b>冰辣口水鸡</b></span></td>
											<td style="text-align: center;">
												<input name="num" type="text" value="1" style="width: 30px;" />份
											</td>
											<td>￥69.90</td>
											<td style="text-align: center; padding-left: 4px;"><img src="/resources/css/img/error.png"/></td>
										</tr>
									</tbody>
									<tfoot id="checkout_tfoot">
										<tr>
											<th colspan="4">总价 <span class="checkout__total">￥498.90</span></th>
										</tr>
									</tfoot>
								</table><!-- /checkout__summary -->
<%--								<button class="checkout__option checkout__option--silent checkout__cancel">--%>
<%--									<i class="fa fa-angle-left"></i>继续点餐--%>
<%--								</button>--%>
								<button onclick="checkoutSubmit(0)"
										class="checkout__option checkout__option--loud" style="background: #140dff!important;">堂食下单</button>
								<button onclick="checkoutSubmit(1)"
										class="checkout__option checkout__option--loud">外卖下单</button>
							</div><!-- /checkout__order-inner -->
						</div><!-- /checkout__order -->
					</div><!-- /checkout -->
					<!-- 购物车 end -->

					<!-- 广告位 start -->
					<div class="dummy-sidebar__overlay"></div>
					<!-- 广告位 end -->
				</div>

				<!-- 点菜单 start -->
				<div id="show_dishes_list">
					<div class="cell">
						<div class="box">
							<img src="/resources/flycart/images/scy.jpg" class="img" width="200" height="200">
							<span>川香酸菜鱼</span><span>¥79.90</span>
							<a href="#" class="button orange addcar">加入餐桌</a>
						</div>
					</div>
				</div>

				<!-- 点菜单 end -->
			</div><!-- /dummy-grid -->
		</div>
	</section>
</div><!-- /container -->
<script src="/resources/macbook/js/classie.js"></script>
<script type="text/javascript">

	(function() {
		[].slice.call( document.querySelectorAll( '.checkout' ) ).forEach( function( el ) {
			var openCtrl = el.querySelector( '.checkout__button' ),
					closeCtrls = el.querySelectorAll( '.checkout__cancel' );

			openCtrl.addEventListener( 'click', function(ev) {
				ev.preventDefault();
				classie.add( el, 'checkout--active' );
			} );

			[].slice.call( closeCtrls ).forEach( function( ctrl ) {
				ctrl.addEventListener( 'click', function() {
					classie.remove( el, 'checkout--active' );
				} );
			} );
		} );
	})();

	$(function () {
		var url = host + "/clDishesList";
		var params = {};
		$.post(url, params, function (result) {
			if(!!result && result.code == 200 && !!result.data){
				var food_list = result.data;
				var show_dishes_html = "";
				for(var i=0;i < food_list.length;i++){
					var food = food_list[i];
					show_dishes_html += "\n" +
							"<div class=\"cell\">\n" +
							"\t<div class=\"box\">\n" +
							"\t\t<img src=\""+ food.sysImage.relativeUrl +"\" class=\"img\" width=\"200\" height=\"200\">\n" +
							"\t\t<span><b>"+ food.name +"</b></span><span>¥" + food.price.toFixed(2) + "</span>\n" +
							"\t\t<a href=\"javascript:void(0)\" class=\"button orange addcar\" onclick='addFoodToCart(\""+food.id+"\")'>加入餐桌</a>\n" +
							"\t</div>\n" +
							"</div>";
				}
				$("#show_dishes_list").html(show_dishes_html);
				flyToCart();
			}
		});
		freshCartInfo();
	});

	/**
	 * 初始化刷新购物车信息
	 */
	function freshCartInfo() {
		var url = host + "/freshCartInfo";
		var params = {"addFoodId": null, "updateFoodId": null, "updateFoodAmount": null, "delFoodId": null};
		$.post(url, params, function (result) {
			console.log(result);
			freshCheckoutList(result);
		});
	}

	/**
	 * 点击添加按钮的事件
	 */
	function addFoodToCart(foodId){
		/**
		 * 1、获取客户id，查看客户是否有购物车，没有则创建并返回cartId；
		 * 2、获取要添加到 餐桌的菜品主键foodId
		 * 3、根据cartId和foodId查询是否已经在餐桌里加入了该菜品/套餐
		 * 4、没有则新增，有则数量+1
		 * 5、重新查询购物车和关联关系，刷新页面的购物车列表（前台执行） 刷新session中loginUser的购物车信息（后台执行）
		 */
		var url = host + "/freshCartInfo";
		var params = {"addFoodId": foodId, "updateFoodId": "", "updateFoodAmount": "", "delFoodId": ""};
		$.post(url, params, function (result) {
			console.log(result);
			freshCheckoutList(result);
		});
	}

	/**
	 * 修改数量
	 */
	function updateFoodNumToCart(foodId){
		var url = host + "/freshCartInfo";
		var updateFoodAmount = $("#num_"+foodId).val();
		var params = {"addFoodId": "", "updateFoodId": foodId, "updateFoodAmount": updateFoodAmount, "delFoodId": ""};
		$.post(url, params, function (result) {
			console.log(result);
			freshCheckoutList(result);
		});
	}

	/**
	 * 点击删除按钮的事件
	 */
	function delFoodFromCart(foodId){
		var url = host + "/freshCartInfo";
		var params = {"addFoodId": "", "updateFoodId": "", "updateFoodAmount": "", "delFoodId": foodId};
		$.post(url, params, function (result) {
			console.log(result);
			freshCheckoutList(result);
		});
	}

	function freshCheckoutList(result){
		var checkout_tbody_html = "";
		if(!!result && !!result.data){
			var cart = result.data;
			// 购物车id
			$("#cartId").val(cart.id);
			$(".checkout__total").text(cart.foodPriceTotal.toFixed(2));
			var links = result.data.linkFoodCarts;
			for(var i=0; i < links.length; i++){
				var link = links[i];
				checkout_tbody_html += "\n" +
					"<tr>\n" +
					"\t<td>" +
					"\t\t<span><b>"+link.foodName+"</b></span>" +
					"\t</td>\n" +
					"\t<td style=\"text-align: center;\">\n" +
					"\t\t<input id='num_"+link.foodId+"' name=\"num\" type=\"text\" value=\""+link.perAmount+"\" style=\"width: 30px;\" onblur='updateFoodNumToCart(\""+link.foodId+"\")' />份\n" +
					"\t</td>\n" +
					"\t<td>￥"+link.totalPerPrice.toFixed(2)+"</td>\n" +
					"\t<td style=\"text-align: center; padding-left: 4px;\">" +
					"\t\t<img src=\"/resources/css/img/error.png\" onclick=\"delFoodFromCart('"+link.foodId+"')\" />" +
					"\t</td>\n" +
					"</tr>";
			}
		}
		$("#checkout_tbody").html(checkout_tbody_html);
	}

	//询问框
	function checkoutSubmit(placeType){
		var confirm_text = "";
		if(placeType == 0){
			confirm_text = '您的桌号是：<input style="float: right;" id="receiverAddress" name="receiverAddress" value="6号" /><br/>' +
					'<br/>收货备注：<input style="float: right;" id="receiverRemark" name="receiverRemark" value="微辣" /><br/>';
		}else if(placeType == 1){
			confirm_text = '您的地址是：<input style="float: right;" id="receiverAddress" name="receiverAddress" value="辽宁省葫芦岛市龙港区海滨南路西50米" /><br/>' +
					'<br/>收货人是：<input style="float: right;" id="receiverName" name="receiverName" value="李思楠" /><br/>' +
					'<br/>收货号码是：<input style="float: right;" id="receiverMobile" name="receiverMobile" value="17890900101" /><br/>' +
					'<br/>收货备注：<input style="float: right;" id="receiverRemark" name="receiverRemark" value="微辣" /><br/>';
		}
		layer.confirm(confirm_text, {
			btn: ['确认','取消'] //按钮
		}, function(){
			var receiverAddress = $("#receiverAddress").val();
			var receiverRemark = $("#receiverRemark").val();
			if(placeType == 1){
				var receiverName = $("#receiverName").val();
				var receiverMobile = $("#receiverMobile").val();
				// layer.msg('外卖下单成功！'+receiverAddress+","+receiverName+","+receiverMobile+","+receiverRemark+"。", {icon: 1});
				layer.confirm('外卖下单成功！'+receiverAddress+","+receiverName+","+receiverMobile+","+receiverRemark+"。<br/>请问怎么支付？", {
					btn: ['微信', '支付宝', '货到付款']
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				});
			}else if(placeType == 0){
				// layer.msg('堂食下单成功！'+receiverAddress+","+receiverRemark+"。", {icon: 1});
				layer.confirm('堂食下单成功！'+receiverAddress+','+receiverRemark+'。<br/>请问怎么支付？', {
					btn: ['微信', '支付宝', '我去前台']
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				},function () {
					createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark);
				});
			}
		});
	}

	function createOrder(placeType, receiverAddress, receiverName, receiverMobile, receiverRemark) {
		/**
		 * 补充：提交订单进入下单流程的接口代码
		 */
		var cartId = $("#cartId").val();
		var url = host + "/cl/update/ordertime";
		var params = {"cartId": cartId, "diningPlaceType": placeType, "receiverAddress": receiverAddress, "receiverName": receiverName,
			"receiverMobile": receiverMobile, "receiverRemark": receiverRemark};
		$.post(url, params, function(result){
			layer.confirm(result.msg, {
				btn: ['我知道了']
			}, function(){
				window.location.replace("/clDishesPage");
			});
		});
	}

</script>
</body>
</html>
